<template>
  <div class="login">
    <div class="pageHeader">
      小白球登录
      <!-- <img src="@/static/images/arrow-left.png" alt="" @click="back"> -->
    </div>

    <div class="loginTel" v-show="loginType">
      <van-form @submit="onSubmit">
        <van-field
          value="1"
          name="method"
          class="telField"
          v-show="false"
        />
        <van-field
          v-model="telphone"
          name="account"
          placeholder="请输入手机号"
          class="telField"
        />
        <van-field
          v-model="telCode"
          name="telcode"
          placeholder="请输入验证码"
          class="telCode"
        >
          <template #input>
            <input v-model="telCode" type="text" name="短信验证码" placeholder="请输入验证码" class="van-field__control">
            <van-button native-type="button" @click="sendCode" :class="codeStatus==0?'codeSending':'codeSended'" >{{codeTitle}}</van-button>
          </template>
        </van-field>

        <div style="width: 80%; margin: 20px auto 0;">
          <van-button round block type="info" native-type="submit" color="#07c160">登录</van-button>
        </div>
      </van-form>
    </div>

    <div class="loginAccound" v-show="!loginType">
      <van-form>
        <van-field
          value="2"
          name="method"
          class="telField"
          v-show="false"
        />

        <van-field
          v-model="telphone"
          name="account"
          placeholder="请输入手机号"
          class="telField"
        />

        <van-field
          v-model="passWord"
          type="password"
          name="password"
          placeholder="请输入登录密码"
          class="passWordField"
        />

        <!-- <div class="yanzheng">
          <van-field
            v-model="yanzheng"
            name="yz"
            placeholder="请输入验证码"
          />

          <div class="randomCode" @click="changeCode"><canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas></div>
        </div> -->
        
      </van-form>

      <div style="width: 80%; margin: 20px auto 0;">
        <van-button round block class="btn" type="info" @click="showVerify = true" color="#07c160" >登录</van-button>
      </div>

      <router-link :to="routerUrl+'/register'" style="display:block;width: 80%; margin: 20px auto 0;">
        <van-button round block type="info" native-type="submit" color="#ff6600" >注册</van-button>
      </router-link>

    </div>

    <div class="loginType">
      <p class="typeTel" v-show="loginType" @click="loginTypeChange">密码登录</p>

      <p class="typeAccount" v-show="!loginType" @click="loginTypeChange">短信登录</p>
    </div>

    <van-popup v-model="showVerify" class="verify" :close-on-click-overlay="true" @closed="closeVerify">
      <slide-verify ref="verify" @success="onSubmit2" @again="" @fulfilled="" @fail="" @refresh="" slider-text="向右滑动" 
        :l="42"
        :r="10" 
        :w="310"
        :h="155"></slide-verify>
    </van-popup>

   
  </div>
</template>

<style scoped>
  .login{
    min-height: calc(100vh - 160px);
  }
  .verify >>> .slide-verify{
    overflow: hidden;
    touch-action: pan-y;
  }
  .verify >>> .slide-verify-slider{
    margin-top: 0 !important;
  }
  .van-field {
    border: 1px solid #cccccc;
    width: 80%;
    border-radius: 30px;
    margin: 0 auto;
  }

  .telField {
    margin: 40px auto 30px;
  }

  .passWordField {
    margin-bottom: 30px;
  }

  .telCode >>> .van-button__text{
    /* color: #2D8AEA; */
  }

  .telCode >>> .codeSending{
    color: #c8c9cc;
  }

  .telCode >>> .codeSended{
    color: #2D8AEA;
  }

  .telCode .van-button {
    height: auto;
    border: 0;
    padding: 0;
    /* color: blue; */
    white-space: nowrap;
  }

  .loginType {
    width: 80%;
    margin: 40px auto 0;
  }

  .loginType p {
    /* text-align: right; */
    color: #2D8AEA;
    display: inline-block;
    float: right;
    font-size: 26px;
  }

  .yanzheng {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 80%;
    margin: 0 auto;
  }

  .yanzheng .van-field {
    margin: 0;
  }

  .yanzheng .randomCode {
    width: 30%;
    margin-left: 10%;
    height: 72px;
    line-height: 72px;
    text-align: center;
    background: #86ddf3;
  }
</style>

<script>
import Vue from 'vue';
import { Form , Button, Toast } from 'vant';
import api from 'api'
import config from 'api/config.js'
import slideVerify from "components/slide-verify"

Vue.use(Form);
Vue.use(Button);
export default {
  components:{
    slideVerify
  },
  data() {
    return {
      showVerify:false,
      routerUrl:config.routerUrl,
      telphone: '',
      telCode: '',
      passWord: '',
      yanzheng: '',
      randomCode: '',
      codeTitle:'发送验证码',
      codeStatus:1, // 1可发送 0不可发送
      loginType: false,
      contentWidth: 80,
      contentHeight: 40,
    }
  },
  mounted() {
    // this.drawPic()
  },
  activated() {
    
  },
  methods: {
    back(){
      this.$router.go(-1);//返回上一层
    },
    onSubmit(values) {
      // method 1短信 2密码
      console.log('submit', values);
      if(this.check(values)){
        this.$store.dispatch("user/login",values)
        this.showVerify = false
        this.closeVerify()
      }
    },
    onSubmit2(){
      let values = {
        method:2,
        account:this.telphone,
        password:this.passWord
      }
      if(this.check(values)){
        this.$store.dispatch("user/login",values)
        this.showVerify = false
        setTimeout(()=>{
          this.closeVerify()
        },300)
      }
    },
    check(val){
      if(!(/^1[34578]\d{9}$/.test(val.account))){
        Toast.fail('手机号格式错误')
        return false
      }else if(val.password == "" && val.method == 2){
        Toast.fail('请输入密码')
        return false
      }
      // else if(this.randomCode != val.yz && val.method == 2){
      //   Toast.fail('验证码错误')
      //   return false
      // }
      else if(val.telcode == '' && val.method == 1){
        Toast.fail('验证码不能为空')
      }else{
        return true
      }
    },
    loginTypeChange() {
      if (this.loginType) {
        this.loginType = false
      } else {
        this.loginType = true
      }

      this.telphone = '';
      this.telCode = '';
      this.passWord = '';
      this.yanzheng = '';
    },
    sendCode() { // 发送验证码
     if(!(/^1[34578]\d{9}$/.test(this.telphone))){
        Toast.fail('手机号格式错误')
      }else if(this.codeStatus == 1){
        let params = {}
        params.account = this.telphone
        params.smstype = 1
        let idx = 60
        //发送验证码操作
        this.codeStatus = 0
        api.get("/index/generateSmsCode",params).then(e=>{
          //操作成功后
          Toast.success("发送成功")
          this.codeStatus = 0
          this.codeTitle = "再次发送("+idx+")"
          let o = setInterval(()=>{
            idx = idx - 1
            if(idx > 0){
              this.codeStatus = 0
              this.codeTitle = "再次发送("+idx+")"
            }else{
              clearInterval(o)
              this.codeStatus = 1
              this.codeTitle = "发送验证码"
            }
          },1000)
        }).catch(err=>{
          this.codeStatus = 1
        })
      }
    },
    closeVerify(){
      this.$refs.verify.reset()
    },
    changeCode() {
      this.randomCode = Math.floor(65535 * Math.random()).toString(16);
    },

    randomNum (min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    // 生成一个随机的颜色
    randomColor (min, max) {
    let r = this.randomNum(min, max)
    let g = this.randomNum(min, max)
      let b = this.randomNum(min, max)
      return 'rgb(' + r + ',' + g + ',' + b + ')'
    },
    drawPic () {
      let canvas = document.getElementById('s-canvas')
      let ctx = canvas.getContext('2d')
      ctx.textBaseline = 'bottom'
    // 绘制背景
      ctx.fillStyle = this.randomColor(180, 240)
      ctx.fillRect(0, 0, 80, 40)
      // 绘制文字
      for (let i = 0; i < 4; i++) {
        var rand = Math.floor(15 * Math.random()).toString(16);
        this.randomCode = this.randomCode + rand;
        this.drawText(ctx, rand , i)
      }
      // console.log(this.randomCode)
      this.drawLine(ctx)
      this.drawDot(ctx)
    },
    drawText (ctx, txt, i) {
      ctx.fillStyle = this.randomColor(50, 160)
      ctx.font = this.randomNum(20, 35) + 'px SimHei'
      let x = (i + 1) * (80 / (4 + 1))
      let y = this.randomNum(30, 40 - 5)
      ctx.translate(x, y)
      ctx.fillText(txt, 0, 0)
      // 恢复坐标原点和旋转角度
      ctx.translate(-x, -y);
    },
    drawLine (ctx) {
      // 绘制干扰线
      for (let i = 0; i < 3; i++) {
        ctx.strokeStyle = this.randomColor(50, 160)
        ctx.beginPath()
        ctx.moveTo(this.randomNum(0, 80), this.randomNum(0, 40))
        ctx.lineTo(this.randomNum(0, 80), this.randomNum(0, 40))
      ctx.stroke()
      }
    },
    drawDot (ctx) {
      // 绘制干扰点
      for (let i = 0; i < 30; i++) {
        ctx.fillStyle = this.randomColor(0, 255)
        ctx.beginPath()
        ctx.arc(this.randomNum(0, 80), this.randomNum(0, 40), 1, 0, 2 * Math.PI)
        ctx.fill()
      }
    },
    changeCode() {
      this.randomCode = ''
      this.drawPic()
    }
  }
}
</script>